page {
    background-color: #F8F8F8;
    font-size: 32rpx;
    font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;

    ::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        color: transparent !important;
        display: none;
    }

    button::after {
        border: none;
    }

    .container {
        display: flex;
        box-sizing: border-box;
        flex-direction: column;
        background-color: #f2f2f2;
        min-height: 100vh;

        .page {
            .video {
                width: 100%;

                video {
                    width: 100%;
                    object-fit: fill;
                }
            }

            .tui-cell-header {
                width: 100%;
                height: 74rpx;
                padding: 0 26rpx;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .tui-cell-title {
                    font-size: 30rpx;
                    line-height: 30rpx;
                    font-weight: 600;
                    color: #333;
                }

                .tui-cell-sub {
                    font-size: 26rpx;
                    font-weight: 400;
                    color: #999;
                    padding-right: 28rpx;
                }

            }

            .tui-flex-wrap {
                flex-wrap: wrap;
                height: auto;
                padding-bottom: 30rpx;
            }

            .tui-flex-box {
                width: 100%;
                display: flex;
                align-items: center;
            }

            .tui-icon-img {
                width: 44rpx;
                height: 44rpx;
                flex-shrink: 0;
            }

            .tui-header-icon {
                position: fixed;
                z-index: 9;
                left: 20rpx;
            }

            .tui-icon-box {
                position: relative;
            }

            .tui-badge {
                position: absolute;
                font-size: 24rpx;
                height: 32rpx;
                min-width: 20rpx;
                padding: 0 6rpx;
                border-radius: 40rpx;
                right: 10rpx;
                top: -5rpx;
                transform: scale(0.8) translateX(60%);
                transform-origin: center center;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 10;
            }

            .tui-badge-red {
                background: #f74d54;
                color: #fff;
            }

            .tui-badge-dot {
                position: absolute;
                height: 12rpx;
                width: 12rpx;
                border-radius: 50%;
                right: -12rpx;
                top: 0;
                background: #f74d54;
            }

            .tui-badge-white {
                background: #fff;
                color: #f74d54;
            }

            .tui-phcolor {
                color: #ccc;
                font-size: 32rpx;
                overflow: visible;
            }

            .tui-opcity {
                opacity: 0.5;
            }

            .tui-red,
            .tui-color-red,
            .tui-icon-red {
                color: #36B184;
            }

            .tui-green,
            .tui-color-green,
            .tui-icon-green {
                color: green;
            }

            .tui-gray {
                color: #999;
            }

            .tui-radius-all {
                border-radius: 24rpx;
                overflow: hidden;
            }

            .tui-sale-price {
                font-size: 34rpx;
                font-weight: 500;
                color: #e41f19;
            }

            .tui-factory-price {
                font-size: 24rpx;
                color: #a0a0a0;
                text-decoration: line-through;
                padding-left: 12rpx;
            }

            .tui-tips {
                padding: 0;
                color: rgb(247, 1, 1);
                font-size: 30rpx;
            }

            .tui-ml-auto {
                margin-left: auto;
            }

            .tui-mtop-26 {
                margin-top: 26rpx;
            }

            .tui-view-title {
                width: 100%;
                font-size: 32rpx;
                font-weight: bold;
                padding: 24rpx 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .tui-hover {
                background-color: #f7f7f9 !important;
            }

            .tui-size-26 {
                font-size: 26rpx;
                line-height: 26rpx;
            }

            .tui-size-24 {
                font-size: 24rpx;
                line-height: 24rpx;
            }

            .tui-size-28 {
                font-size: 28rpx;
                line-height: 28rpx;
            }

            .tui-size-32 {
                font-size: 32rpx;
                line-height: 32rpx;
            }

            .tui-ellipsis {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .tui-list-item {
                position: relative;

                &::after {
                    content: '';
                    position: absolute;
                    border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
                    -webkit-transform: scaleY(0.5);
                    transform: scaleY(0.5);
                    bottom: 0;
                    right: 0;
                    left: 30rpx;
                }
            }

            .tui-price-large {
                font-size: 34rpx;
                line-height: 32rpx;
                font-weight: 600;
            }

            .tui-last::after {
                border-bottom: 0 !important;
            }

            .tui-grid-icon {
                text-align: center;
            }

            .tui-radius {
                border-radius: 50%;
            }

            .tui-flex-end {
                align-items: flex-end;
            }

            .tui-flex-wrap {
                flex-wrap: wrap;
                height: auto !important;
            }

            .tui-fles-between {
                justify-content: space-between !important;
            }

            .tui-flex-shrink {
                flex-shrink: 0;
            }

            .tui-safearea-bottom {
                width: 100%;
                height: env(safe-area-inset-bottom);
            }

            .tui-form-button {
                width: 100%;
                position: fixed;
                left: 0;
                bottom: 0;
                z-index: 999;
                padding: 20rpx 25rpx 30rpx;
                box-sizing: border-box;
                background: #fafafa;
            }

            .tui-list-button {
                width: 100%;
                position: fixed;
                left: 0;
                bottom: 0;
                z-index: 999;
                padding: 20rpx 25rpx 30rpx;
                box-sizing: border-box;
                background: #fafafa;
            }

            .list-add-button {
                padding-bottom: calc(140rpx - env(safe-area-inset-bottom));
            }

            .tui-address-bg-img {
                position: absolute;
                width: 100%;
                height: 8rpx;
                left: 0;
                bottom: 0;
                background-image: url("");
            }
        }
    }
}

.flex,
.fx {
    display: flex;
}

.flex-b,
.fx-b {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-a,
.fx-a {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.flex-c,
.fx-c {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fl,
.f-fl {
    float: left;
}

.fr,
.f-fr {
    float: right;
}

.pr,
.p-relative {
    position: relative;
}

.pf,
.p-fixed {
    position: fixed;
}

.pa,
.p-absolute {
    position: absolute;
}

.tc,
.text-c {
    text-align: center;
}

.tr,
.text-r {
    text-align: right;
}

.tl,
.text-l {
    text-align: left;
}

.tui-bold,
.fw {
    font-weight: bold;
}

.width50 {
    width: 50%;
}

.getPhoneNumberFixed {
    width: 100%;
    height: 100%;
    background-color: #ff000000;
    // background-color: red;
    position: fixed;
    top: 5%;
    padding: 0;
    margin: 0;
    right: 0;
    z-index: 9930;
}

.member_portrait,
.wx_applet_avatar {
    height: 100rpx;
    position: relative;

    .img {
        width: 100rpx;
        height: 100rpx;
        border-radius: 100rpx;
    }
}

.wx_applet_input_nickname,
.wx_applet_choose_avatar,
.wx_applet_button {
    width: 100%;
    height: 100%;
    background: #ff000000;
    // background: red;
    position: absolute;
    padding: 0;
    right: 0;
    top: 0;

    image {
        width: 100%;
        height: 100%;
    }
}

.tui-header-box {
    width: 100%;
    padding: 0 30rpx 0 20rpx;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 32px;
    transform: translateZ(0);
    z-index: 9999;

    /* #ifndef MP */
    .tui-header-box-icon {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .tui-icon-setup {
            margin-left: 8rpx;
        }
    }

    /* #endif */

}

.tui-keyboard-tips {
    width: 100%;
    height: 120rpx;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    background: #fff;
    position: relative;
    color: #333;
    border: 0;

    .tui-digital-box {
        background: #fff;
        padding-bottom: 50rpx;
        border: 0;
    }
}

.wallet-box {
    height: 220rpx;
    padding: 15rpx 15rpx;

    .wallet-info {
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, #ff000099, #58d4a6);
        border-radius: 25rpx;
        position: relative;

        .wallet-data {
            position: absolute;
            top: 10%;
            left: 5%;
            color: #FFFFFF;

            .title {
                font-size: 45rpx;
            }

            .number {
                margin-top: 30rpx;
                font-size: 65rpx;
            }
        }

        .wallet-give {
            position: absolute;
            top: 35%;
            right: 5%;
            color: #FFFFFF;
        }
    }
}

.tui-mybg-box {
    width: 100%;
    height: 464rpx;
    position: relative;

    .tui-my-bg-h-464 {
        width: 100%;
        height: 464rpx !important;
        display: block;
    }

    .tui-my-bg-h-320 {
        width: 100%;
        height: 320rpx !important;
        display: block;
    }

    .tui-header-center {
        position: absolute;
        width: 100%;
        height: 128rpx;
        left: 0;
        top: 120rpx;
        padding: 0 30rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        .tui-wallet {
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            font-size: 40rpx;

            .tui-wallet-info {
                .tui-wallet-info-value {
                    font-size: 90rpx;
                }
            }

            .button-action {}
        }

        .tui-avatar {
            flex-shrink: 0;
            width: 128rpx;
            height: 128rpx;
            display: block;
            border-radius: 50%;
        }

        .tui-info {
            width: 60%;
            padding-left: 30rpx;

            .tui-nickname {
                font-size: 30rpx;
                font-weight: 500;
                color: #fff;
                display: flex;
                align-items: center;

                .tui-img-vip {
                    width: 56rpx;
                    height: 24rpx;
                    margin-left: 18rpx;
                }
            }

            .tui-vip-box {
                max-width: 190rpx;
                padding: 8rpx 15rpx;
                margin-top: 10rpx;
                background: linear-gradient(to right, #FDF1C8, #F8D15C);
                font-size: 16rpx;
                border-radius: 25rpx;
                color: #000000;
                text-align: center;
            }

            .tui-explain {
                width: 80%;
                font-size: 24rpx;
                font-weight: 400;
                color: #fff;
                opacity: 0.75;
                padding-top: 8rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .tui-btn-edit {
            flex-shrink: 0;
            padding-right: 22rpx;
        }

        /* #ifdef MP */
        .tui-set-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        /* #endif */
    }

    .tui-header-btm {
        width: 100%;
        padding: 0 30rpx;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 280rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;

        .tui-btm-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .tui-btm-num {
                font-size: 32rpx;
                font-weight: 600;
                position: relative;
            }

            .tui-btm-text {
                font-size: 24rpx;
                opacity: 0.85;
                padding-top: 4rpx;
            }

        }
    }
}

.tui-title-img {
    width: 100%;
    padding: 15rpx 10rpx;
    display: flex;
    justify-content: center;
    margin-top: 20rpx;
    margin-bottom: 20rpx;

    image {
        width: 352rpx;
        height: 32rpx;
    }
}

.tui-ticket-box,
.tui-product-box {
    padding: 0 25rpx;
    box-sizing: border-box;

}

.tui-popup-box {
    position: relative;
    padding: 30rpx 0 100rpx 0;

    .tui-product-box {
        display: flex;
        align-items: flex-end;
        font-size: 24rpx;
        padding-bottom: 30rpx;

        .tui-popup-img {
            height: 200rpx;
            width: 200rpx;
            border-radius: 24rpx;
            display: block;
        }

        .tui-popup-price {
            padding-left: 20rpx;
            padding-bottom: 8rpx;

            .tui-amount {
                color: #ff201f;
                font-size: 36rpx;
            }

            .tui-number {
                font-size: 24rpx;
                line-height: 24rpx;
                padding-top: 12rpx;
                color: #999;
            }
        }
    }

    .tui-popup-scroll {
        font-size: 26rpx;

        .tui-scrollview-box {
            padding: 0 30rpx 15rpx 30rpx;
            box-sizing: border-box;

            .tui-attr-title {
                padding: 10rpx 0;
                color: #333;
            }

            .tui-attr-box {
                font-size: 0;
                padding: 20rpx 0;

                .tui-attr-item {
                    max-width: 100%;
                    min-width: 200rpx;
                    height: 64rpx;
                    display: -webkit-inline-flex;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    background: #f7f7f7;
                    padding: 0 26rpx;
                    box-sizing: border-box;
                    border-radius: 32rpx;
                    margin-right: 20rpx;
                    margin-bottom: 20rpx;
                    font-size: 26rpx;
                }

                .tui-attr-active {
                    background: #fcedea !important;
                    color: #e41f19;
                    font-weight: bold;
                    position: relative;

                    &::after {
                        content: '';
                        position: absolute;
                        border: 1rpx solid #e41f19;
                        width: 100%;
                        height: 100%;
                        border-radius: 40rpx;
                        left: 0;
                        top: 0;
                    }
                }
            }
        }
    }

    .tui-right-flex {
        display: flex;
        align-items: center;
        justify-content: center;

        .tui-flex-1 {
            flex: 1;
            padding: 6rpx;
        }
    }

    .tui-right {
        position: absolute;
        right: 30rpx;
        top: 30rpx;
    }
}

.tui-popup-btn {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}

.tui-operation {
    width: 100%;
    height: 100rpx;
    background: rgba(255, 255, 255, 0.98);
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
    bottom: 0;
    left: 0;
    padding-bottom: env(safe-area-inset-bottom);

    .tui-operation-left {
        width: 41.66666667%;
        display: flex;
        align-items: center;

        .tui-operation-item {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: relative;

            .tui-operation-text {
                font-size: 22rpx;
                color: #333;
                transform: scale(0.9);
                transform-origin: center center;
            }
        }
    }

    .tui-operation-right {
        width: 58.33333333%;
        height: 100rpx;
        padding: 0 12rpx;
        box-sizing: border-box;
    }
}

.tui-searchbox {
    width: 100%;
    box-sizing: border-box;
    padding: 10rpx 20rpx;
    height: 80rpx;
    background: #fff;
    position: fixed;
    left: 0;
    top: 0;
    /* #ifdef H5 */
    top: 44px;
    /* #endif */
    z-index: 100;
}

.tui-notice-board {
    width: 100%;
    box-sizing: border-box;
    font-size: 28rpx;
    height: 60rpx;
    background: #fff8d5;
    display: flex;
    align-items: center;
    z-index: 999;

    .tui-icon-bg {
        background: #fff8d5;
        position: relative;
        z-index: 10;
    }

    .tui-scorll-view {
        flex: 1;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        color: #f54f46;

        .tui-notice {
            display: block;
            // -webkit-backface-visibility: hidden;
            // -webkit-perspective: 1000;
            // transform: translate3d(100%, 0, 0);
        }

        .tui-animation {
            -webkit-animation: tui-rolling 12s linear infinite;
            animation: tui-rolling 12s linear infinite;
        }

        @-webkit-keyframes tui-rolling {
            0% {
                transform: translate3d(100%, 0, 0);
            }

            100% {
                transform: translate3d(-170%, 0, 0);
            }
        }

        @keyframes tui-rolling {
            0% {
                transform: translate3d(100%, 0, 0);
            }

            100% {
                transform: translate3d(-170%, 0, 0);
            }
        }
    }
}

.tui-banner-swiper {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;

    .tui-banner-box {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .tui-banner-item {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;


            .tui-slide-image {
                width: 100%;
                height: 100%;
                display: block;
                border-radius: 2rpx;
            }
        }

        /* #ifdef MP-WEIXIN */
        .wx-swiper-dot {
            width: 8rpx;
            height: 8rpx;
            display: inline-flex;
            background: none;
            justify-content: space-between;
        }

        .wx-swiper-dot::before {
            content: "";
            flex-grow: 1;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 16rpx;
            overflow: hidden;
        }

        .wx-swiper-dot-active::before {
            background: #fff;
        }

        .wx-swiper-dot.wx-swiper-dot-active {
            width: 16rpx;
        }

        /* #endif */
    }

    .tui-banner-tag {
        position: absolute;
        color: #fff;
        bottom: 30rpx;
        right: 0;
    }
}

.tui-radio-group {
    transform: scale(0.8);
    transform-origin: 100% center;
    flex-shrink: 0;
    margin-left: -55rpx;

    .tui-radio-item {
        display: inline-block;
        padding-left: 28rpx;
        font-size: 36rpx;
        vertical-align: middle;
    }
}

.tui-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .tui-checkbox-item {
        padding: 10rpx 0;
    }
}

.tui-checkbox {
    min-width: 70rpx;
    display: flex;
    align-items: center;
}

/* #ifdef MP-WEIXIN */
.tui-checkbox .wx-checkbox-input {
    width: 40rpx;
    height: 40rpx;
    margin-right: 0 !important;
    border-radius: 50% !important;
    transform: scale(0.8);
    border-color: #d1d1d1 !important;
}

.tui-checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    background: #eb0910;
    width: 44rpx !important;
    height: 44rpx !important;
    border: none;
}

/* #endif */
/* #ifndef MP-WEIXIN */
::v-deep .tui-checkbox .uni-checkbox-input {
    width: 40rpx;
    height: 40rpx;
    margin-right: 0 !important;
    border-radius: 50% !important;
    transform: scale(0.8);
    border-color: #d1d1d1 !important;
}

::v-deep .tui-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
    background: #eb0910;
    width: 45rpx !important;
    height: 45rpx !important;
    border: none;
}

/* #endif */
/* #ifdef MP-ALIPAY */
::v-deep checkbox {
    width: 40rpx;
    height: 40rpx;
    margin-right: 0 !important;
    border-radius: 50% !important;
    transform: scale(0.8);
    border-color: #d1d1d1 !important;
    position: relative;
}

::v-deep checkbox-checked {
    background: #eb0910;
    width: 45rpx !important;
    height: 45rpx !important;
    border: none;
}

/* #endif */